<template>
  <!-- 充值活动 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="充值活动" width="60%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <page-details ref="baseForm" :data="data"/>
      <el-form ref="activityForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="95px">
        <div class="flex item-box" v-for="(item,index) in activityData" :key="index">
          <div class="title width25">
            {{ item.label }}
            <el-button class="marginL10" v-permission="'mail.add'" type="primary" size="mini" icon="el-icon-plus" @click="isShowDetails = true" style="margin-top:12px">新增商品</el-button>
          </div>
          <div class="content width80">
            <!-- 活动商品 -->
            <div v-show="item.key=='goods'">
              <div class="flexWrap border-item marginTB10" v-for="(second,two) in formParams.recharge_info" :key="two">
                <div class="btn-box-add">
                  <el-tooltip content="新增活动商品" v-show="goodsIndex==two">
                    <el-button class="marginL10" size="mini" type="primary" circle icon="el-icon-plus" @click="addGoods"/>
                  </el-tooltip>
                </div>
                <el-form-item label="充值商品:" class="marginR10" label-width="80px">
                  <el-select v-model="second.goods_id" placeholder="请选择充值商品" >
                    <el-option v-show="third.activity_type==10 && third.goods_type==1" :label="'【'+third.value+'】'+third.label" :value="third.value" v-for="(third, three) in goodsData" :key="three"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="最大可领取次数:" label-width="120px">
                  <el-input-number :min="0" :max="999999999" :precision="0" v-model="second.can_receive_count" controls-position="right" clearable placeholder="请输入道具数量"/>
                </el-form-item>
                <el-form-item label="描述:" class="marginT10" label-width="130px">
                  <el-input type="text" v-model="second.des" clearable placeholder="请输入描述"></el-input>
                </el-form-item>
                <div class="btn-box-delete" label-width="60px">
                  <el-tooltip content="删除配置" v-show="formParams.recharge_info.length != 1">
                    <el-button class="marginL10" size="mini" type="danger" circle icon="el-icon-minus" @click="deleteGoods(two)"/>
                  </el-tooltip>
                </div>
                <!-- 道具配置 -->
                <div class="title marginL30">
                  <div class="flex" v-for="(third,three) in second.item" :key="three">
                    <div class="btn-box-add" style="margin-top:0;">
                      <el-tooltip content="新增道具配置" v-show="second.itemIndex==three">
                        <el-button class="marginL10" size="mini" type="success" circle icon="el-icon-plus" @click="addReward(two)" />
                      </el-tooltip>
                    </div>
                    <el-form-item class="item-clear" label="奖励:" label-width="50px">
                      <el-select class="width180" v-model="third.type" placeholder="请选择道具类型" filterable >
                        <el-option :label="fourthly.label" :value="fourthly.value" v-for="(fourthly, four) in propDataArray" :key="four"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item class="item-clear" label="数值:" label-width="50px">
                      <el-input-number class="width180 marginR5" :min="0" :max="999999999999" :precision="0" :controls="false" v-model="third.num" controls-position="right" clearable placeholder="请输入道具奖励数值"/>
                    </el-form-item>
                    <div class="btn-box-delete" label-width="60px">
                      <el-tooltip content="删除道具配置" v-show="second.item.length != 1">
                        <el-button class="marginL10" size="mini" type="warning" circle icon="el-icon-minus" @click="deleteReward(two,three)" />
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('activityForm')">确 认</el-button>
    </span>
    <goods-details :show="isShowDetails" :data="{}" @onHideDetails="onHideDetails" :goodsTypeData="GOODS_TYPE"/>
  </el-dialog>
</template>

<script>
import {
  addActivity,
  editActivity
} from "@/api/activity";
import {
  GOODS_TYPE
} from "@/utils/enum";

import PageDetails from '../page-details.vue'
import GoodsDetails from '@/views/activityManage/commodity/page-details'
export default {
  components: {
    PageDetails,
    GoodsDetails
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    goodsData: {
      type: Array,
      default: function () {
        return this.$store.state.commonState.goodDataArray
      }
    },
    propDataArray: {
      type: Array,
      default: function () {
        return this.$store.state.commonState.propDataArray
      }
    },
  },
  data () {
    return {
      GOODS_TYPE,
      isShow: false,
      isShowDetails:false,
      activityData:[
        {label:'活动商品',key:'goods'}
      ],
      formParams: {
        recharge_info:[{
          sub_id:'', // 唯一表示 在一条数据中唯一
          des:'', // 描述
          param:'', // 参数
          goods_id:'', // 商品id
          can_receive_count:'', // 最大可领取次数
          item:[{
            type:1,num:0
          }],
          itemIndex:0
        }]
      },
      goodsIndex:0,
      ruleForm: {},
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        if(that.formParams.recharge_info && that.formParams.recharge_info.length){
          that.formParams.recharge_info.forEach(item=>{
            item.itemIndex=item.item.length-1
          })
          that.goodsIndex=that.formParams.recharge_info.length-1
        }else{
          that.formParams={
            recharge_info:[{
              sub_id:'', // 唯一表示 在一条数据中唯一
              des:'', // 描述
              param:'', // 参数
              goods_id:'', // 商品id
              can_receive_count:'', // 最大可领取次数
              item:[{
                type:1,num:0
              }],
              itemIndex:0
            }]
          }
          that.goodsIndex=0
        }
      } else {
        that.formParams = {
          recharge_info:[{
            sub_id:'', // 唯一表示 在一条数据中唯一
            des:'', // 描述
            param:'', // 参数
            goods_id:'', // 商品id
            can_receive_count:'', // 最大可领取次数
            item:[{
              type:1,num:0
            }],
            itemIndex:0
          }]
        }
        that.goodsIndex=0
      }
    }
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      if(!this.$refs.baseForm.handleConfirm()){
        return false
      }
      let that = this,noData=[],params = JSON.parse(JSON.stringify(this.$refs.baseForm.handleConfirm()));
      params.activity_type = 10
      // 商品
      params.recharge_info=that.formParams.recharge_info
      params.recharge_info.map((item,index)=>{
        item.sub_id=index
        item.param=that.arrToString(item.item)
        // item.param=String(item.param)
        // if(item.param && item.param>10000){
        //   noData.push(item)
        // }
      })
      // if(noData.length){
      //   return that.$message.error('请输入正确的返回倍数,最大值为10000')
      // }
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if(params.id){
            editActivity(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }else{
            addActivity(params).then((res)=> {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 选择商品
    chooseGoods(){
      let goodInfo=this.formParams.recharge_info;
      this.goodsData.map(item=>{
        goodInfo.map(second=>{
          if(second.goods_id && second.goods_id==item.value){
            item.isChecked = false
          }else{
            item.isChecked = true
          }
        })
      })
    },
    // 新增道具
    addGoods(){
      this.goodsIndex++
      this.formParams.recharge_info.push({
        sub_id:'', // 唯一表示 在一条数据中唯一
        des:'', // 描述
        param:'', // 参数
        goods_id:'', // 商品id
        can_receive_count:'', // 最大可领取次数
        item:[{
          type:1,num:0
        }],
        itemIndex:0
      })
    },
    // 删除道具
    deleteGoods(index){
      this.goodsIndex--
      this.formParams.recharge_info.splice(index,1,)
    },
    // 新增道具
    addReward (index) {
      this.formParams.recharge_info[index].itemIndex++
      this.formParams.recharge_info[index].item.push({
        type:1,num:0
      })
    },
    // 删除道具
    deleteReward (index,two) {
     this.formParams.recharge_info[index].itemIndex++
      this.formParams.recharge_info[index].item.splice(two, 1,)
    },
    // 道具回显-字符串转数组
    arrToString(arr){
      let reward='';
      arr.forEach(item=>{
        reward+=item.type+','+item.num*10000+';'
      })
      reward = reward.substring(0, reward.length - 1)
      return  reward
    },
    onHideDetails () {
      this.isShowDetails = false
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.el-form-item{
  margin-bottom: 0;
}
.btn-box-add{
  width: 50px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
.btn-box-delete{
  width: 50px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
</style>
